<template>
    <div class="dropdown" ref="dropdownRef">
        <a @click.prevent="toggleOpen" class="btn btn-outline-light my-2 dropdown-toggle" href="#">
            {{ title }}
        </a>
        <ul class="dropdown-menu" :style="{display: 'block'}" v-if="isOpen">
            <slot></slot>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import useClickOutside from '../hooks/useClickOutside';
const props = defineProps({
    title: {
        type: String,
        required: true
    }
});

const dropdownRef = ref<null | HTMLElement>(null);
const isOpen = ref(false);
const toggleOpen = () => {
    isOpen.value = !isOpen.value;
}

const isClickOutside = useClickOutside(dropdownRef);

// 监听点击到外部的状态
watch(isClickOutside, () => {
    if (isOpen.value && isClickOutside.value) {
        isOpen.value = false;
    }
})
</script>

<style>
</style>